<template>
  <div class>
    <div>
       <span style="font-size: 14px;color:#606266">表名：</span><el-select  size="mini" v-model="tableName" clearable filterable style="width:200px" placeholder="请选择">
            <el-option
              v-for="item in tableNameList"
              :key="item.tableName"
              :label="item.tableName"
              :value="item.tableName">
            </el-option>
          </el-select>
      <el-col :span="1.5" style="float:right">
        <el-button type="text" class="el-icon-caret-right" size="mini" @click="sqlConmond">运行</el-button>
        <el-button type="text" class="el-icon-view" size="mini" @click="showDDL">查看DDL</el-button>
        <el-button type="text" class="el-icon-refresh-right" size="mini" @click="clearSql">清空sql</el-button>
      </el-col>
      
    </div>
    <div style="margin-top: 20px;"><el-input size="mini" type="textarea"  v-model="selectSql" :rows="10"></el-input></div>
    <div>
      <el-table stripe border :data="tableData">
        <template v-for="(item,index) in tableHead">
          <el-table-column :prop="item.columnName" :label="item.columnComment" align="center" :key="index"></el-table-column>
        </template>
      </el-table>
    </div>
    <el-dialog title="创建语句" :close-on-click-modal="false" :visible.sync="dialogVisible">
      <el-input size="mini" type="textarea" v-model="searchDDL" :rows="18"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      </div>
  </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableNameList:[],
      tableName:'',
      searchDDL:'',
      dialogVisible:false,
      selectSql: "",
      tableHead:[],
      tableData: [],
    };
  },
  mounted() {
    this.getTableNameList();
  },
  methods: {
    getTableNameList(){
      this.$api
              .formPost("/api/code/codeTableInfo/getTableNameList", {
              })
              .then(res => {
                  if (res.retHead.code == "0000000") {
                      this.tableNameList=res.retBody;
                  }
              });
     },
    sqlConmond() {
      let params={
        sql:this.selectSql,
      }
      this.$api
            .formPost("/api/code/codeTableInfo/runSelectSql", params)
            .then(res => {
              if (res.retHead.code == "0000000") {
                this.$message({
                  type: "success",
                  message: "运行成功！"
                });
                if(res.retBody){
                  this.tableHead=res.retBody.tableHeadList;
                  this.tableData=res.retBody.tableDataList;
                }else{
                  this.tableHead=[];
                  this.tableData=[];
                }
              } else {
                this.$message({
                  type: "error",
                  message: res.retHead.message
                });
              }
            });
    },
    showDDL() {
      this.searchDDL="";
      this.dialogVisible=true;
        let params={
          tableName:this.tableName,
        }
        this.$api
              .formPost("/api/code/codeTableInfo/doGetCreateDDL", params)
              .then(res => {
                  if (res.retHead.code == "0000000") {
                      this.searchDDL=res.retBody.ddlSql;
                  }
              });
    },
    clearSql(){
      this.selectSql="";
    }
  }
};
</script>